<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../css/font_mine.css">

    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <script src="../plugins/echarts/echarts.js"></script>
    <script src="../plugins/echarts/china.js"></script>
    <script src="../controller/home.js"></script>
</head>
<body >
    <div  style="background-color:#F2F2F2;padding-top: 5px ">
        <div  style="border:1px dashed #ffffff;margin-left: 10px;margin-right: 10px;margin-top: 10px;background-color:white">

            <div class="foo layui-anim  layui-anim-upbit">
                <img style="width: 150px;height: 150px;margin-bottom: 50px"  src="../img/icon.png"/>
                <span class="letter" data-letter="火">火</span>
                <span class="letter" data-letter="石">石</span>
                <span class="letter" data-letter="镜">镜</span>
                <span class="letter" data-letter="头">头</span>
            </div>
        </div>
    </div>
    <div style="padding: 10px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">用户分布</div>
                    <div class="layui-card-body">
                        <div id="main" style="height: 500px;"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">热搜榜</div>
                    <div class="layui-card-body">
                        <div  >
                            <table  class="layui-hide" lay-filter="demo" id="table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    $(function () {

        var myChart = echarts.init(document.getElementById('main'));

       var  option = {
            title : {
                text : "火石用户分布图",
                x : 'center'
            },
            tooltip : { //tooltip提示框，鼠标悬浮交互时的信息提示
                trigger : 'item'
            },
            legend : { //legend图例
                orient : 'vertical', //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
                x : 'left',
                data : []
            },
            dataRange :  [


                {
                    orient: 'vertical',      // 'vertical'
                    color: ['#1e90ff','#f0ffff'],    //颜色
                    splitList: [
                        {start: 10000},
                        {start: 5000, end: 10000},
                        {start: 1000, end: 5000},
                        {start: 500, end: 1000},
                        {start: 200, end: 500},
                        {start: 50, end: 200},
                        {start: 5, end: 50},
                        {start: 0, end: 5},
                    ]
                }
            ],
            toolbox : {
                show : true,
                feature : {
                    mark : {
                        show : true
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            roamController : {
                show : true,
                x : 'right',
                mapTypeControl : {
                    'china' : true
                }
            },
            series : [
                {
                    name : '火石用户分布图',
                    type : 'map',
                    mapType : 'china',
                    itemStyle : {
                        normal : {
                            label : {
                                show : true
                            }
                        },
                        emphasis : {
                            label : {
                                show : true
                            }
                        }
                    },
                    data : []
                } ]
        };
        myChart.showLoading();

        var Address = [];
        var nums = [];

        $.ajax({
            type : "get",
            async : true,
            url : "/userController/userAddress",
            dataType : "json",
            success : function(data,status,xhr) {
                if (xhr.status == 200) {
                    $.each(data, function(k, v) {       //遍历返回的JSON数据
                        Address.push(v.address);
                        nums.push({
                            name : v.address,
                            value : v.number
                        });
                    });
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({ //加载数据图表
                        legend : {
                            data : Address
                        },
                        series : [ {
                            data : nums
                        } ]
                    });
                }
            },
            error : function(errorMsg) {
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
        myChart.setOption(option);

    });



</script>
</body>
</html>